<template>
  <div class="cursor-pointer">
    <box title="告警统计">
       <!-- 日期选择 -->
       <template #title-right>
        <div class="flex z-[999]">
          <div v-for="(item, index) in List" :key="index" class="text-[#ffffff] w-[26px] h-[26px]
                     "
               :class="selectTime == index ?  getDataImg('selectTime') :getDataImg('defaultSelectTime')"
               @click="changeList(item, index)">
            <div class="text-center leading-[26px]">
              {{ isNullOrEmpty( item?.name ) }}
            </div>
  
          </div>
        </div>
      </template>
      <div class="h-[156px] flex items-center">
        <div class="flex-1 pl-[26px]" v-for="(item, index) in countAllList" :key="index"
        @click="item.clickFun()">
          <div class="w-[30px] h-[30px]">
            <img :src="item.img" class="w-[30px] h-[30px]" />
          </div>
          <div class="alltext pt-[10px] pb-[12px]">
            {{ isNullOrEmpty( item.name ) }}
          </div>
          <div class="gradient-text text-[24px] font-medium ">
            <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
            <div v-else>999+</div>
          </div>
        </div>
      </div>
    </box>
  </div>
</template>
<script setup lang="ts">
 import { getDataImg } from "@/utils/data-themset"
import { isNullOrEmpty } from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import {supervisecount,} from '@/api/screen/largeData'
import { showSuperviseAlarm, } from '@/views/large-data-screen/utils/index'
import { timeFormat } from '@/utils/functions'
import img1 from '@/assets/screenimg/sup3@2x.png'
import img2 from '@/assets/screenimg/sup4@2x.png'
import img3 from '@/assets/screenimg/sup5@2x.png'
const clickTime = ref()
const clickTimes = ref()
const List = ref([
  //  { name: '全部', id: 0 },
    { name: '日', id: 1 },
    { name: '周', id: 2 },
    { name: '月', id: 3 },
    { name: '年', id: 4 },
  ])
  const alarmDT = ref(1)
  const selectTime = ref(0)
  const timeMap = {
  /** 本日 */
  today: timeFormat(new Date(), 'd'),
  /** 本周一 */
  monday: timeFormat(new Date(new Date().setDate(new Date().getDate() - new Date().getDay() + 1)), "d"),
  /** 本周日 */
  sunday: timeFormat(new Date(new Date().setDate(new Date().getDate() + (7 - new Date().getDay()))), "d"),
  /** 本月第一天 */
  firstDayOfMonth: timeFormat(new Date(new Date().getFullYear(), new Date().getMonth(), 1), "d"),
  /** 本月最后一天 */
  lastDayOfMonth: timeFormat(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0), "d"),
  /** 本年第一天 */
  firstDayOfYear: timeFormat(new Date(new Date().getFullYear(), 0, 1), "d"),
  /** 本年最后一天 */
  lastDayOfYear: timeFormat(new Date(new Date().getFullYear(), 11, 31), "d")
}
const countAllList = ref([
  {
    name: '告警数量(个)',
    number: 0,
    img: img1,
    clickFun: () => showSuperviseAlarm({
       defaultSearch: { createdAt:[clickTime.value, clickTimes.value],
                  startTime: clickTime.value,
                  endTime: clickTimes.value, } })
  },
  {
    name: '项目告警(个)',
    number: 0,
    img: img2,
    clickFun: () => showSuperviseAlarm({
       defaultSearch: { createdAt:[clickTime.value, clickTimes.value],
                  startTime: clickTime.value,
                  endTime: clickTimes.value, } })
  },
  {
    name: '个体告警(个)',
    number: 0,
    img: img3,
    clickFun: () => showSuperviseAlarm({
       defaultSearch: { createdAt:[clickTime.value, clickTimes.value],
                  startTime: clickTime.value,
                  endTime: clickTimes.value, } })
  }
])
onMounted(() => {
  clickTime.value = timeMap.today
    clickTimes.value =  timeMap.today
  getcountAllList()
})

  //点击
  const changeList = (item, index) => {
    console.log("点击s",item);
    if(index == 0){
            // 今日
            clickTime.value = timeMap.today
            clickTimes.value =  timeMap.today
            console.log("日",clickTime.value,clickTimes.value);
            
          }
          if(index == 1){
            //周
            clickTime.value = timeMap.monday
            clickTimes.value = timeMap.sunday
            console.log("周",clickTime.value,clickTimes.value);
          }
          if(index == 2){
            
            //月
            clickTime.value = timeMap.firstDayOfMonth
            clickTimes.value = timeMap.lastDayOfMonth
            console.log("月",clickTime.value,clickTimes.value);
          }
          if(index == 3){
            //年
            clickTime.value = timeMap.firstDayOfYear
            clickTimes.value = timeMap.lastDayOfYear
            console.log("年",clickTime.value,clickTimes.value);
          }
  selectTime.value = index
  alarmDT.value = item.id
  getcountAllList()
}
//总体统计
const getcountAllList = () => {
  supervisecount({
    alarmDT:alarmDT.value
  }).then(res => {     //无需传参
    console.log("告警统计",res);
    
    countAllList.value[0].number = res.result.total
    countAllList.value[1].number = res.result.projectCount
    countAllList.value[2].number = res.result.personalCount
  })
}


</script>
<style scoped lang="scss"></style>
